<template>
  <div class="man-account-list">
    <custom-button-group
      class="man-account-list__nav"
      v-model="filters.type">
      <custom-button :label="1">
        新用户
      </custom-button>
      <custom-button :label="0">
        全部用户
      </custom-button>
    </custom-button-group>

    <el-table :data="tableData.list" :loading="loading" element-loading-text="加载中..." border border-radius
    >
      <el-table-column
        prop="username"
        align="center"
        label="账户名">
      </el-table-column>

      <el-table-column
        align="center"
        label="开通时间"
      >
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="账户信息（账户名/密码）"
        width="220"
      >
        <template slot-scope="{row}">
          <el-tooltip class="item" effect="dark" trigger="click" content="复制成功！" placement="bottom-end">
            <el-button
              type="link"
              :data-clipboard-text="getCopyContent(row)"
              class="clipboard-btn"
            >
              <svg-icon icon-class="link" type="primary"></svg-icon>
              复制
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>

      <template slot="empty">
        <div class="el-table__empty">
          <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
          <div class="el-table-text">暂无数据</div>
        </div>
      </template>
    </el-table>
    <div class="el-pagination-container">
      <el-pagination
        bordered
        @size-change="gridSizeChange" @current-change="gridCurrentChange"
        :current-page="filters.page" :page-size="filters.size"
        :total="tableData.total">
      </el-pagination>
      <el-warning>为保护用户隐私，超出24小时，或者下级修改密码之后，不可复制下级代理的密码。</el-warning>
    </div>
  </div>
</template>

<script>
  import {
    proxyListApi as getApi,
  } from '@/services/api/low-level';

  import {grid} from '@/build';

  export default {
    name: "man-account-list",

    mixins: [grid],

    data() {
      return {
        filters: {
          type: 1,
          page: undefined,
          size: 10
        },
        tableData: {
          list: []
        }
      }
    },

    watch: {
      'filters.type'() {
        this.getAll();
      }
    },

    methods: {
      getCopyContent(row) {
        return `用户名：${row.username} ${row.password ? `密码：${row.password}` : ''} 网址：${window.document.location.origin}`;
      }
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
      });

      this.getAll();
    }
  }
</script>

<style lang="scss" scoped>
  @include b(man-account-list) {
    @include e(nav) {
      float: right;
      margin-bottom: 20px;
    }
  }

</style>